<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>上传文件 - 云盘</title>
  <!-- Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <!-- 引入Google字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  
  <!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
  <link rel="stylesheet" href="./upload_files/bootstrap.min.css">
  <link href="./upload_files/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
  
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', 'Microsoft YaHei', sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    
    .container {
      width: 100%;
      max-width: 800px;
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      transition: transform 0.3s ease;
    }
    
    .container:hover {
      transform: translateY(-5px);
    }
    
    .header {
      background: linear-gradient(to right, #4a00e0, #8e2de2);
      color: white;
      padding: 25px 30px;
      text-align: center;
      position: relative;
    }
    
    .header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(to right, #00c6ff, #0072ff);
    }
    
    .header h1 {
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 8px;
      letter-spacing: 1px;
    }
    
    .header p {
      opacity: 0.9;
      font-size: 15px;
      font-weight: 300;
    }
    
    .upload-container {
      padding: 30px;
      text-align: center;
    }
    
    .upload-info {
      background: #f8f9fa;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 25px;
      border-left: 4px solid #6a11cb;
    }
    
    .upload-info h3 {
      color: #333;
      margin-bottom: 10px;
      font-size: 18px;
    }
    
    .upload-info p {
      color: #666;
      font-size: 14px;
      line-height: 1.5;
    }
    
    .file-input-container {
      margin: 20px 0;
    }
    
    .btn-back {
      background: linear-gradient(to right, #6c757d, #5a6268);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 12px 25px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      margin-top: 20px;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
    }
    
    .btn-back:hover {
      background: linear-gradient(to right, #5a6268, #495057);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      color: white;
      text-decoration: none;
    }
    
    .btn-back i {
      margin-right: 8px;
    }
    
    .upload-status {
      margin-top: 20px;
      padding: 15px;
      border-radius: 8px;
      display: none;
      animation: fadeIn 0.5s;
    }
    
    .upload-success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
    
    .upload-error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }
    
    .upload-warning {
      background-color: #fff3cd;
      color: #856404;
      border: 1px solid #ffeaa7;
    }
    
    .file-upload-stats {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 8px;
    }
    
    .stat-item {
      text-align: center;
    }
    
    .stat-value {
      font-size: 24px;
      font-weight: 600;
      color: #6a11cb;
    }
    
    .stat-label {
      font-size: 14px;
      color: #666;
      margin-top: 5px;
    }
    
    .footer {
      text-align: center;
      padding: 15px;
      font-size: 12px;
      color: #999;
      border-top: 1px solid #eee;
    }
    
    /* 自定义文件上传样式 */
    .file-input-wrapper {
      border: 2px dashed #6a11cb;
      border-radius: 10px;
      padding: 30px;
      background: #f8f9fa;
      transition: all 0.3s;
    }
    
    .file-input-wrapper:hover {
      border-color: #4a00e0;
      background: #f0f2f5;
    }
    
    .file-input-wrapper .file-caption {
      font-size: 16px;
      color: #666;
    }
    
    .file-preview {
      border: none !important;
      background: transparent !important;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
      20%, 40%, 60%, 80% { transform: translateX(5px); }
    }
    
    .shake {
      animation: shake 0.5s;
    }
    
    .duplicate-options {
      margin-top: 15px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 8px;
      display: none;
    }
    
    .option-buttons {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-top: 10px;
    }
    
    .btn-option {
      padding: 8px 15px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
    }
    
    .btn-replace {
      background: #dc3545;
      color: white;
    }
    
    .btn-replace:hover {
      background: #c82333;
    }
    
    .btn-rename {
      background: #17a2b8;
      color: white;
    }
    
    .btn-rename:hover {
      background: #138496;
    }
    
    .btn-cancel {
      background: #6c757d;
      color: white;
    }
    
    .btn-cancel:hover {
      background: #5a6268;
    }
    
    @media (max-width: 768px) {
      .container {
        max-width: 100%;
      }
      
      .upload-container {
        padding: 20px;
      }
      
      .file-upload-stats {
        flex-direction: column;
        gap: 15px;
      }
      
      .option-buttons {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>
  <div id="app" class="container">
    <div class="header">
      <h1><i class="fas fa-cloud-upload-alt"></i> 上传文件</h1>
      <p>将文件上传到您的云盘存储空间</p>
    </div>
    
    <div class="upload-container">
      <div class="upload-info">
        <h3><i class="fas fa-info-circle"></i> 上传说明</h3>
        <p>支持所有类型的文件上传，单个文件大小限制为 100MB。上传后文件将安全存储在您的个人云盘中。</p>
      </div>
      
      <div class="file-input-wrapper">
        <form action='#' method="post" enctype="multipart/form-data">
          <input id="file" name="file" type="file" class="file" data-msg-placeholder="选择要上传的文件">
        </form>
      </div>
      
      <div class="file-upload-stats">
        <div class="stat-item">
          <div class="stat-value" id="fileCount">0</div>
          <div class="stat-label">已上传文件</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" id="totalSize">0 MB</div>
          <div class="stat-label">总占用空间</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">100 MB</div>
          <div class="stat-label">单文件限制</div>
        </div>
      </div>
      
      <div id="uploadStatus" class="upload-status">
        <i class="fas fa-check-circle"></i> <span id="statusMessage">上传成功！</span>
      </div>
      
      <div id="duplicateOptions" class="duplicate-options">
        <p><i class="fas fa-exclamation-triangle"></i> <strong>检测到同名文件</strong></p>
        <p>您要上传的文件在云端已存在，请选择操作：</p>
        <div class="option-buttons">
          <button class="btn-option btn-replace" id="replaceBtn"><i class="fas fa-sync-alt"></i> 替换原文件</button>
          <button class="btn-option btn-rename" id="renameBtn"><i class="fas fa-edit"></i> 重命名新文件</button>
          <button class="btn-option btn-cancel" id="cancelBtn"><i class="fas fa-times"></i> 取消上传</button>
        </div>
      </div>
      
      <a href="javascript:history.back()" class="btn-back">
        <i class="fas fa-arrow-left"></i> 返回主页
      </a>
    </div>
    
    <div class="footer">
      © 2025 花生云盘服务 | 安全可靠的云端存储解决方案
    </div>
  </div>

  <!-- 原有的所有脚本文件 -->
  <script src="./upload_files/jquery-3.2.1.min.js"></script>
  <script src="./upload_files/piexif.min.js" type="text/javascript"></script>
  <script src="./upload_files/sortable.min.js" type="text/javascript"></script>
  <script src="./upload_files/purify.min.js" type="text/javascript"></script>
  <script src="./upload_files/popper.min.js"></script>
  <script src="./upload_files/bootstrap.min.js" type="text/javascript"></script>
  <script src="./upload_files/fileinput.min.js"></script>
  <script src="./upload_files/theme.js"></script>

  <script>
    // 完全保持原有的JavaScript逻辑不变
    var hexcase = 0; /* hex output format. 0 - lowercase; 1 - uppercase */
    var chrsz = 8; /* bits per input character. 8 - ASCII; 16 - Unicode */
    
    // ... 原有的SHA1加密算法函数保持不变 ...
    function hex_sha1(s) {
      return binb2hex(core_sha1(AlignSHA1(s)));
    }

    function sha1_vm_test() {
      return hex_sha1("abc") == "a9993e364706816aba3e25717850c26c9cd0d89d";
    }

    function core_sha1(blockArray) {
      var x = blockArray; // append padding
      var w = Array(80);
      var a = 1732584193;
      var b = -271733879;
      var c = -1732584194;
      var d = 271733878;
      var e = -1009589776;

      for (var i = 0; i < x.length; i += 16) {
        var olda = a;
        var oldb = b;
        var oldc = c;
        var oldd = d;
        var olde = e;
        for (var j = 0; j < 80; j++) {
          if (j < 16)
            w[j] = x[i + j];
          else
            w[j] = rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1);
          var t = safe_add(safe_add(rol(a, 5), sha1_ft(j, b, c, d)), safe_add(safe_add(e, w[j]), sha1_kt(j)));
          e = d;
          d = c;
          c = rol(b, 30);
          b = a;
          a = t;
        }

        a = safe_add(a, olda);
        b = safe_add(b, oldb);
        c = safe_add(c, oldc);
        d = safe_add(d, oldd);
        e = safe_add(e, olde);
      }
      return new Array(a, b, c, d, e);
    }

    function sha1_ft(t, b, c, d) {
      if (t < 20)
        return (b & c) | ((~b) & d);
      if (t < 40)
        return b ^ c ^ d;
      if (t < 60)
        return (b & c) | (b & d) | (c & d);
      return b ^ c ^ d;
    }

    function sha1_kt(t) {
      return (t < 20) ? 1518500249 : (t < 40) ? 1859775393 : (t < 60) ? -1894007588 : -899497514;
    }

    function safe_add(x, y) {
      var lsw = (x & 0xFFFF) + (y & 0xFFFF);
      var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
      return (msw << 16) | (lsw & 0xFFFF);
    }

    function rol(num, cnt) {
      return (num << cnt) | (num >>> (32 - cnt));
    }

    function AlignSHA1(str) {
      var nblk = ((str.length + 8) >> 6) + 1,
        blks = new Array(nblk * 16);

      for (var i = 0; i < nblk * 16; i++)
        blks[i] = 0;

      for (i = 0; i < str.length; i++)
        blks[i >> 2] |= str.charCodeAt(i) << (24 - (i & 3) * 8);
      blks[i >> 2] |= 0x80 << (24 - (i & 3) * 8);
      blks[nblk * 16 - 1] = str.length * 8;
      return blks;
    }

    function binb2hex(binarray) {
      var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
      var str = "";
      for (var i = 0; i < binarray.length * 4; i++) {
        str += hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8 + 4)) & 0xF) +
          hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8)) & 0xF);
      }
      return str;
    }

    // 文件上传初始化 - 增加错误处理功能
    $(document).ready(function() {
      var currentDuplicateFile = null;
      
      $("#file").fileinput({
        theme: 'fa',
        uploadUrl: '/file/upload?' + new URLSearchParams(window.location.search).toString(),
        allowedFileExtensions: ['jpg', 'png', 'gif', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'txt', 'zip', 'rar'],
        maxFileSize: 102400, // 100MB in KB
        maxFilesNum: 10,
        slugCallback: function(filename) {
          return filename.replace('(', '_').replace(']', '_');
        },
        showUpload: true,
        showRemove: true,
        showPreview: true,
        browseOnZoneClick: true,
        msgPlaceholder: '选择要上传的文件...',
        dropZoneEnabled: true,
        dropZoneTitle: '拖放文件到这里或点击选择文件'
      }).on('fileuploaded', function(event, data, previewId, index) {
        // 文件上传成功后的处理
        var response = data.response;
        if (response && response.success) {
          showStatus('success', '文件上传成功！');
        }
      }).on('fileuploaderror', function(event, data, msg) {
        // 文件上传失败后的处理
        var response = data.response;
        
        // 检查是否是重复文件错误
        if (response && response.includes('duplicationFilename')) {
          // 显示重复文件处理选项
          showDuplicateFileOptions(data.files[index]);
        } else {
          // 其他错误
          showStatus('error', '文件上传失败: ' + (msg || '未知错误'));
        }
      }).on('filebatchuploaderror', function(event, data, msg) {
        // 批量上传错误处理
        showStatus('error', '文件上传失败: ' + (msg || '未知错误'));
      });
      
      // 显示状态消息
      function showStatus(type, message) {
        var statusEl = $('#uploadStatus');
        var messageEl = $('#statusMessage');
        
        statusEl.removeClass('upload-success upload-error upload-warning');
        
        if (type === 'success') {
          statusEl.addClass('upload-success');
          messageEl.html('<i class="fas fa-check-circle"></i> ' + message);
        } else if (type === 'error') {
          statusEl.addClass('upload-error');
          messageEl.html('<i class="fas fa-exclamation-circle"></i> ' + message);
          statusEl.addClass('shake');
          setTimeout(function() {
            statusEl.removeClass('shake');
          }, 500);
        } else if (type === 'warning') {
          statusEl.addClass('upload-warning');
          messageEl.html('<i class="fas fa-exclamation-triangle"></i> ' + message);
        }
        
        statusEl.show();
        $('#duplicateOptions').hide();
      }
      
      // 显示重复文件处理选项
      function showDuplicateFileOptions(file) {
        currentDuplicateFile = file;
        
        $('#uploadStatus').hide();
        $('#duplicateOptions').show();
        
        // 添加抖动效果
        $('#duplicateOptions').addClass('shake');
        setTimeout(function() {
          $('#duplicateOptions').removeClass('shake');
        }, 500);
      }
      
      // 替换原文件按钮事件
      $('#replaceBtn').click(function() {
        if (currentDuplicateFile) {
          // 这里可以发送特殊请求来替换文件
          showStatus('warning', '替换功能开发中，暂时请重命名文件');
          $('#duplicateOptions').hide();
        }
      });
      
      // 重命名新文件按钮事件
      $('#renameBtn').click(function() {
        if (currentDuplicateFile) {
          var newName = prompt('请输入新的文件名:', currentDuplicateFile.name);
          if (newName && newName.trim() !== '') {
            // 在实际应用中，这里应该使用重命名后的文件名重新上传
            showStatus('warning', '重命名功能开发中，请手动修改文件名后重新上传');
            $('#duplicateOptions').hide();
          }
        }
      });
      
      // 取消上传按钮事件
      $('#cancelBtn').click(function() {
        showStatus('info', '上传已取消');
        $('#duplicateOptions').hide();
        // 清除当前选择的文件
        $('#file').fileinput('clear');
      });
    });
  </script>
</body>
</html>